
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Sign in &middot; Twitter Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
        
      }

	.shadow{
	box-shadow: 2px 2px 5px #888888;}

      #container {
        width: 71%;
        height: 60%;
       
    /*    padding: 19px 1px 29px 38px;
        margin: 0 auto 20px;*/
      padding: 0% 1% 1% 1%;
         margin-top: 10%;
        margin-left:10%;
        margin-right:10%;

        background-color: #fff;

        border: 10px solid #e5e5e5 ;
        
        position: absolute;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      
      .moveimg{
      position: relative;
      margin-top: 1px;
      left: 1px;
      
      border-color: #0044cc;
      border-width: 2px solid;
      }
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
  </head>
  <body>
  <div id="container">
       <table id='drivelist'>
       <tr><td><p>
       <div class="btn-group">
  <a class="btn btn-primary " href="#"><i class="icon-user icon-white"></i> Saurabh</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#" id="viewall"><i class="icon-pencil"></i> View All Files</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="icon-off"></i> Logout</a></li>
  </ul>
</div> 
  
</p></td></tr><br>
       <tr><td id="gdrive">
        <ul class="thumbnails">
  <li class="span2">
    <div class="thumbnail shadow" onmouseover="$(this).removeClass('shadow');$(this).addClass('moveimg')" onmouseout="$(this).addClass('shadow');$(this).removeClass('moveimg')">
      <img  alt="" src="img/google.png">

    </div>
  </li>
  
  
  <li class="span2">
    <div class="thumbnail shadow" onmouseover="$(this).removeClass('shadow');$(this).addClass('moveimg')" onmouseout="$(this).addClass('shadow');$(this).removeClass('moveimg')">
      <img  alt="" src="img/dropbox.jpg" width="128px" height="128px">
         </div>
  </li>
  
   <li class="span2">
    <div class="thumbnail shadow" onmouseover="$(this).removeClass('shadow');$(this).addClass('moveimg')" onmouseout="$(this).addClass('shadow');$(this).removeClass('moveimg')" style="width:165px;height:130px;">
      <img alt="Skydrive" src="img/skydrive.jpg" >
      
    </div>
  </li>
  <li class="span2" align ="right">
    <div class="thumbnail shadow" onmouseover="$(this).removeClass('shadow');$(this).addClass('moveimg')" onmouseout="$(this).addClass('shadow');$(this).removeClass('moveimg')" style="width:165px;height:128px;">
      <img  alt="" src="img/box_01.png" >
    </div>
  </li></ul></td></tr>


<tr>
<td>
<ul class="thumbnails" style="height:10px">
<li class="span2" style="height:20px">
   <div class="progress progress-striped active">
  	<div class="bar gdrivebar" style="width: 40%;"></div>
  </div>
</li>
<!-- <ul class="thumbnails"> -->
<li class="span2">
     <div class="progress progress-striped active">
  	<div class="bar" style="width: 40%;"></div>
  </div>
  </li>
<!-- <ul class="thumbnails"> -->
<li class="span2">
     <div class="progress progress-striped active">
  	<div class="bar" style="width: 40%;"></div>
  </div>
  </li>
<!-- <ul class="thumbnails"> -->
<li class="span2">
  <div class="progress progress-striped active">
  	<div class="bar" style="width: 40%;"></div>
  </div>
  </li></td></ul></tr>       
<tr><td>
<ul class="breadcrumb span1 gdriveul" style="display:none;width:55px;margin-top: 0%">
  <li class="drivetxt"></li>
</ul>
</td></tr>
</table>

    </div>



<div id="content"></div>    <!-- Le javascript
    ================================================== -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/signuplogin.js"></script>


  </body>
</html>
